<template>
    <view class="container">
        <view class="h-180"></view>
        <view class="content">
            <u-row justify="space-between">
                <u-col :span="6">
                    <agent-card
                        labelName="总推广数(人)"
                        value="5000"
                    ></agent-card>
                </u-col>
                <u-col :span="6">
                    <agent-card
                       labelName="今日增长(人)"
                       value="5000"
                       color="#356CE7"
                    ></agent-card>
                </u-col>
            </u-row>
            <u-row justify="space-between">
                <u-col :span="6">
                    <agent-card
                        labelName="总消费金额(元)"
                        value="150000.00"
                        mode="price"
                    ></agent-card>
                </u-col>
                <u-col :span="6">
                    <agent-card
                        labelName="今日增长(元)"
                        value="150000.00"
                        mode="price"
                        color="#356CE7"
                    ></agent-card>
                </u-col>
            </u-row>
            <u-row justify="space-between">
                <u-col :span="6">
                    <agent-card
                        labelName="总提成金额(元)"
                        value="30000.00"
                        mode="price"
                    ></agent-card>
                </u-col>
                <u-col :span="6">
                    <agent-card
                        labelName="今日增长(元)"
                        value="5000"
                        color="#356CE7"
                        mode="price"
                    ></agent-card>
                </u-col>
            </u-row>
        </view>
        <view class="rule">
            <view class="rule-title">————【 代言人权益 】————</view>
            <view class="rule-info">
                <view class="p">1.代言要求与条件说明说明说明说明说明</view>
                <view class="p"> 2.代言人征集活动时间为2022.4.20-2022.4.30 </view>
                <view class="p">3.代言成功可享受限量级稀有藏品免费空投等等等等等等等，积分积分积分积分获得等其他权益说明。</view>
            </view>
        </view>
    </view>
</template>

<script>
    import AgentCard from "@/components/AgentCard"
    export default {
        name: "index",
        components: {
            AgentCard
        },
        data() {
            return {

            }
        },
        onLoad() {

        }
    }
</script>

<style lang="scss" scoped>
    .container {
        width: 100vw;
        height: 100vh;
        background: url("https://img.ionepin.com/4b5b288d1db4a142625855501e551a08b80ddb0c.png") no-repeat;
        background-size: 100% 100%;
        .h-180 {
            height: 180rpx;
        }
        .content {
            background: #FFFFFF;
            border-radius: 20rpx;
            margin: 0 26rpx;
            padding-top: 85rpx;
        }
        .rule {
            box-sizing: border-box;
            width: 700rpx;
            margin: 50rpx 26rpx 0 26rpx;
            background: url("https://img.ionepin.com/842d0a7c2aa2e92d8b21fb620bcffca7a19106de.png") no-repeat;
            background-size: 100% 100%;
            padding: 36rpx 42rpx;
            .rule-title {
                font-size: 28rpx;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 1.5;
                text-align: center;
            }
            .rule-info {
                margin-top: 33rpx;
                .p {
                    font-size: 22rpx;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 1.5;
                }
            }
        }
    }
</style>
